<template>
	<div
		class="sub-title"
		:style="{
			backgroundImage: `url(${requireImg(img)})`,
			width: typeof width == 'string' ? resetSize(width) : resetSize(width) + 'px',
		}"
	>
		<slot name="title">
			<div class="title">{{ title }}</div>
		</slot>
		<slot name="right"> </slot>
	</div>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
	import { requireImg } from '@/utils/common'
	import { resetSize } from '@/utils/reset'
	interface Props {
		title?: string
		img: string
		width?: string | number
	}
	withDefaults(defineProps<Props>(), {
		title: '小标题',
		width: '100%',
	})
</script>

<style lang="scss" scoped>
	.sub-title {
		height: 82px;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		.title {
			width: 100%;
			height: 100%;
			display: flex;
			box-sizing: border-box;
			padding-left: 60px;
			align-items: center;
			font-family: TITLE;
			letter-spacing: 2px;
			font-size: 40px;
		}
	}
</style>
